<template>
  <view class="container comment">
    <!-- 评论列表 -->
    <view class="comment_list" v-for="comment in commentList" :key="comment.id">
      <view class="comment_item">
        <view class="logo">
          <image
            src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLYaMAr2AKiccaJ3oV7NOBDWCkKJYHufeYGJyUeSavcw6cIlI5pwLyUT5ac0n6EHs4FjwfGWX06GeQ/132"
          />
        </view>
        <view class="content_wrap">
          <view class="name">{{ comment.nickname }}</view>
          <veiw class="date">
            {{ comment.gmtModified }}
            <uni-rate :touchable="false" :value="5" size="20" />
          </veiw>
          <view class="content">{{ comment.content }}</view>
        </view>
      </view>
    </view>
    <!-- 加载更多 -->
    <view class="load_more">
      <uni-load-more status="status" />
    </view>

    <!-- 提交评论 -->
    <view class="comment_bar">
      <input class="input_box" placeholder="请点击输入" cursor-spacing="10" />
      <uni-icons class="input_icon" type="paperplane-filled" size="20" />
    </view>
  </view>
</template>

<script lang='ts' setup>
import { reactive, ref } from "vue";
import courseApi from "@/Api/course";
import { onLoad,onReachBottom } from "@dcloudio/uni-app";
const commentList = ref([]);
const status = ref('more')
const params = reactive({
  courseId: 0,
  page: 1,
  limit: 10,
});

onReachBottom(()=>{
		status.value === 'more' && getListdata()
})

onLoad((options) => {
  const courseId = options.courseId;
  params.courseId = courseId;
  getListdata();
});

const getListdata = async () => {
		status.value = 'loading'
		const result = await courseApi.getcoursecomment(params)
		if(result.code == 200){
			if(result.data.items.length<10){
				status.value = 'nomore'
			}else{
				status.value = 'more'
			}
			
		}else{
			status.value = 'nomore'
		}
		commentList.value.push(...result.data.items)
		params.page++ 
    console.log('params.page的值',params.page)
	}
</script>
<style lang='less' scoped>
.comment {
  background: white;
  padding: 16px 16px 60px 16px;
  .comment_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      180deg,
      hsla(0, 0%, 86.7%, 0) 0,
      hsla(0, 0%, 86.7%, 0.2) 0.42857rem,
      hsla(0, 0%, 86.7%, 0.2) 0.57143rem,
      #fff 0.64286rem,
      #fff
    );

    .input_box {
      width: 80%;
      height: 30px;
      line-height: 30px;
      background-color: #f2f3f7;
      border-radius: 20px;
      // text-indent: 10px;
      padding-left: 10px;
      font-size: 16px;
    }
    .input_icon {
      margin-left: 8px;
    }
  }
  .comment_list {
    .comment_item {
      display: flex;
      padding: 15px 0;
      border-bottom: 0.07143rem solid #ececec;

      .logo {
        border-radius: 50%;
        width: 32px;
        height: 32px;
        margin-right: 8px;
        image {
          border-radius: 50%;
          height: 100%;
          width: 100%;
        }
      }
      .content_wrap {
        font-size: 12px;
        color: #000;
        flex: 1;
        .date {
          color: #a1a5b2;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .content {
          margin-top: 8px;
        }
      }
    }
  }
}
</style>